<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_ncfesihrjs.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<style type="text/css">
		.container-fluid{
			overflow-y: auto;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="gs-box">
				<form class="">
					<div class="gs-box-item">
						<div class="title">基础信息</div>
						<div class="form-box">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">公司名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<span class="title">行业类别</span>
									<div @click="handSelect" class="form-controls bg-white">
										<span>{{checkSelcet}}</span>
										<i class="iconfont icon-xiangxia"></i>
										<div class="list-ite" v-if="showSelcet">
											<ul class="mp00">
												<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index)" class="list-none">{{item.name}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="fb-box"><span class="title">区域</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">邮编</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title" style="width: 20%;">联系人</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">职位</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title">手机</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">QQ</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box"><span class="title">邮箱</span><input type="text" class="form-controls" name="" id="" value="" /></div>
							</div>
							
							<div class="col-md-6 padding-0">
								<div class="fb-box logo"><span class="title">公司logo</span><input @change="handlLogo($event)" type="file" class="form-controls" name="" id="" value="" /><div class="img-box" style="background-image: url(img/add.png);"></div></div>
								<div class="fb-box"><span class="title">详细地址</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title">电话</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">传真</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box"><span class="title">公司网址</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box contents"><span class="title">公司介绍</span><textarea rows="3" class="form-controls"></textarea></div>
							</div>
						</div>
					</div>
					<div class="gs-box-item">
						<div class="title">财务信息</div>
						<div class="form-box">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title" style="padding-left: 20px;">纳税人识别号</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">发票抬头</span><input type="text" class="form-controls" name="" id="" value="" /></div>
							</div>
						</div>
					</div>
					
					<div class="footer-buttom">
						<button type="button">取消</button>
						<button type="button">保存</button>
					</div>
				</form>
				
				
				
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:".gs-box",
				data:{
					base64Url:"",
					checkSelcet:"汽车用品",
					showSelcet:false,
					selectList:[
						{
							name:"汽车用品",
							value:"1"
						},
						{
							name:"手机数码",
							value:"2"
						},
						{
							name:"食品酒水饮料",
							value:"3"
						},
						{
							name:"电子机电",
							value:"4"
						},
						{
							name:"家用电器",
							value:"5"
						},
						{
							name:"个护化妆品",
							value:"6"
						},
						{
							name:"钟表珠宝",
							value:"7"
						},
						{
							name:"家具家装",
							value:"8"
						},
						{
							name:"服装鞋帽箱包",
							value:"9"
						},
						{
							name:"日用百货",
							value:"10"
						},
						{
							name:"母婴用品",
							value:"11"
						},
						{
							name:"生鲜农贸",
							value:"12"
						},
						{
							name:"餐饮连锁",
							value:"13"
						},
						{
							name:"医药行业",
							value:"14"
						},
						{
							name:"其他行业",
							value:"15"
						}
					]
				},
				mounted(){
					for (let i = 0;i<this.selectList.length;i++) {
						this.selectList[i].active = false;
					}
				},
				methods:{
					handlLogo(el){
						console.log(el.target.files[0]);
						var files = el.target.files[0]
						var reader = new FileReader()
						if (/^image/.test( files.type)){
							var reader = new FileReader();
							reader.readAsDataURL(files);
							reader.onloadend = function(){
								console.log(this.result);
								$(".img-box").css({"background-image":"url(" + this.result + ")"})
							}
						}
					},
					handSelect(){
						if(this.showSelcet){
							this.showSelcet = false;
						}else{
							this.showSelcet = true;
						}
						
					},
					checkSel(e,title,index){
						this.checkSelcet = title;
						for (let i = 0;i<this.selectList.length;i++) {
							if(i == index){
								this.selectList[i].active = true;
							}else{
								this.selectList[i].active = false;
							}
						}
					}
				}
			})
			
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
		</script>
	</body>
</html>
